<template>
  <!-- 渠道队伍 -->
  <div class="container">
    <div class="flx-center" style="margin-bottom: 10px">
      <el-button
        type="primary"
        :icon="Back"
        size="small"
        class="arrowBtn bottomPrevious"
        aria-label="bottomPrevious"
        @click="changeParamsIndex(-1)"
      />
      <div class="chartTitle" @click="handleChartClick">{{ currentParams.title }}</div>
      <el-button
        type="primary"
        :icon="Right"
        size="small"
        class="arrowBtn bottomNext"
        aria-label="bottomNext"
        @click="changeParamsIndex(1)"
      />
    </div>
    <swiper
      :modules="modules"
      :loop="true"
      :slides-per-view="1"
      :space-between="50"
      :autoplay="autoplayConfig"
      :navigation="navigation"
      @swiper="onSwiper"
      @slide-change="onSlideChange"
      class="swiperBox"
    >
      <swiper-slide v-for="(slide, slideIndex) in params" :key="slideIndex">
        <div class="main-flex">
          <div class="main-item" v-for="(item, k) in slide.data" :key="k">
            <div class="cardBox">
              <div class="item">
                <div class="icon" :class="'icon' + k">
                  <i class="iconfont" :class="item.icon" @click="handleChartClick"></i>
                </div>
                <div class="text">
                  <div class="dataName">{{ item.name }}</div>
                  <div class="dataValue mt8" :style="{ color: item.color[0] }">
                    {{ item.value }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </swiper-slide>
      <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->
    </swiper>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from "vue";
import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import type { Swiper as SwiperType } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import { Right, Back } from "@element-plus/icons-vue";

const params = [
  {
    title: "当日开学校区网络情况",
    data: [
      {
        name: "保障时段",
        value: "8:00-12:00",
        icon: "icon-cishu",
        color: ["#14B4FF"]
      },
      {
        name: "今日新生开学校区",
        value: "25个",
        icon: "icon-cehnggong",
        color: ["#00FF92"]
      },
      {
        name: "5G分流比",
        value: "74.2%",
        icon: "icon-shijian",
        color: ["#FFE125"]
      },
      {
        name: "高负荷小区",
        value: "3个",
        icon: "icon-zengxiaorenshu",
        color: ["#A4D6E8"]
      }
    ]
  },
  {
    title: "已开学校区网络概况",
    data: [
      {
        name: "新生开学",
        value: "92所",
        icon: "icon-cishu",
        color: ["#14B4FF"]
      },
      {
        name: "老生开学",
        value: "104所",
        icon: "icon-cehnggong",
        color: ["#00FF92"]
      },
      {
        name: "5G分流比",
        value: "72.3%",
        icon: "icon-shijian",
        color: ["#FFE125"]
      },
      {
        name: "云瞰移动用户占比",
        value: "48.5%",
        icon: "icon-zengxiaorenshu",
        color: ["#A4D6E8"]
      }
    ]
  }
];

const emit = defineEmits(["clickEvent"]);
const swiperInstance = ref<SwiperType | null>(null);
const currentSlideIndex = ref(0);
const currentParamsIndex = ref(0);
const isAutoplay = ref(true);
const currentParams = computed(() => params[currentParamsIndex.value]);

const autoplayConfig = computed(() => ({
  delay: 4000,
  disableOnInteraction: true,
  pauseOnMouseEnter: true
}));

const modules = [Autoplay, Pagination, Navigation, Scrollbar];
const navigation = ref({
  nextEl: ".bottomNext",
  prevEl: ".bottomPrevious"
});

const onSwiper = (swiper: SwiperType) => {
  swiperInstance.value = swiper;
};

const handleChartClick = () => {
  emit("clickEvent", "应急通信调度", []);
};

const onSlideChange = () => {
  if (swiperInstance.value) {
    currentSlideIndex.value = swiperInstance.value.realIndex;
    if (swiperInstance.value.autoplay.running) {
      swiperInstance.value.autoplay.start();
    }
    // isAutoplay.value = false;
    // swiperInstance.value.autoplay.stop();
  }
};

const changeParamsIndex = (step: number) => {
  currentParamsIndex.value = (currentParamsIndex.value + step + params.length) % params.length;
  currentSlideIndex.value = 0;
  if (swiperInstance.value) {
    swiperInstance.value.slideTo(0);
    isAutoplay.value = true;
    swiperInstance.value.autoplay.start();
  }
};

// 使用 watch 来处理副作用
watch(
  currentParamsIndex,
  newIndex => {
    currentSlideIndex.value = 0;
    console.log(currentParamsIndex.value + "发生变化" + newIndex + "，重置轮播到第一页");
    if (swiperInstance.value) {
      swiperInstance.value.slideTo(0);
      isAutoplay.value = true;
      swiperInstance.value.autoplay.start();
    }
  },
  { immediate: true }
);

// 监听自动播放状态
watch(isAutoplay, newValue => {
  if (swiperInstance.value) {
    if (newValue) {
      swiperInstance.value.autoplay.start();
    } else {
      swiperInstance.value.autoplay.stop();
    }
  }
});
</script>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  height: 100%;
  .arrowBtn {
    position: absolute;
    box-sizing: border-box;
    width: 10px;
    height: 18px;
    color: #b1d8ff;
    background: rgb(102 226 251 / 8%);
    border: 1px solid rgb(18 142 255 / 40%);
    &.ant-btn-sm {
      border-radius: 0;
    }
  }
  .arrowBtn:hover {
    color: #00d5ff;
    background-color: rgb(102 226 251 / 30%);
  }
  .bottomPrevious {
    left: 0;
  }
  .bottomNext {
    right: 0;
  }
  .main-flex {
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    gap: 10px; /* 设置块之间的间距 */
    height: 100%;
    .main-item {
      box-sizing: border-box; /* 包括内边距和边框在内的宽度和高度计算 */
      flex: 1 1 calc(50% - 20px); /* 每个块占据 50% 的宽度减去间距 */
      border: 0 solid #dddddd;
    }
    .cardBox {
      height: 100%;
      text-align: center;
      background-image: radial-gradient(
        circle at 50% 0%,
        rgb(23 173 255 / 20%) 0%,
        rgb(23 173 255 / 20%) 0%,
        rgb(40 115 255 / 6%) 99%
      );
      border-radius: 4px;
      box-shadow: inset 0 0 0 0 #128eff;
      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        .icon {
          display: inline-block;
          width: 87px;
          height: 88px;
          line-height: 88px;
          text-align: center;
          background: url("@/views/datascreenV2/assets/images/digitalHumanIconBg.png") no-repeat;
          .iconfont {
            position: relative;
            top: -7px;
            left: 6px;
            font-size: 28px;
          }
          &.icon0 {
            .iconfont {
              /* 隐藏实际文字颜色 */
              color: transparent;
              text-shadow: 0 0 32px #00d5ff;
              background: linear-gradient(to bottom, #a2e3ff, #0db6ff);

              /* 使用背景作为文字颜色 */
              background-clip: text;
            }
          }
          &.icon1 {
            .iconfont {
              /* 隐藏实际文字颜色 */
              color: transparent;
              text-shadow: 0 0 32px #ffb900;
              background: linear-gradient(to bottom, #fff1cd, #ecc14f);

              /* 使用背景作为文字颜色 */
              background-clip: text;
            }
          }
          &.icon2 {
            .iconfont {
              /* 隐藏实际文字颜色 */
              color: transparent;
              text-shadow: 0 0 32px #40e792;
              background: linear-gradient(to bottom, #c5ffe2, #40e792);

              /* 使用背景作为文字颜色 */
              background-clip: text;
            }
          }
          &.icon3 {
            .iconfont {
              /* 隐藏实际文字颜色 */
              color: transparent;
              text-shadow: 0 0 32px #a4d6e8;
              background: linear-gradient(to bottom, #d9dee0, #a4d6e8);

              /* 使用背景作为文字颜色 */
              background-clip: text;
            }
          }
        }
        .text {
          width: calc(100% - 87px);
          text-align: center;
          .dataName {
            font-size: 14px;
            color: #ffffff;

            // font-family: YouSheBiaoTiHei;
          }
          .dataValue {
            font-family: futura;
            font-size: 18px;
            color: #00d5ff;
          }
        }
      }
    }
  }
}
</style>
